<template>
    <div class="register-box">
        <el-card class="registerinfo-card">
            <div style="width: 100%;height: 5%">
                <!-- 选择学院 -->
                <el-select
                    v-model="selectV"
                    placeholder="学校缴费信息"
                    :popper-append-to-body="false"
                    class="pay-select-style"
                    popper-class="pay-select-popper"
                    @change="getCollegePay()"
                >
                    <el-option-group style="text-align: left"
                        v-for="group in options"
                        :key="group.label"
                        :label="group.label"
                    >
                        <el-option
                            v-for="item in group.options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-option-group>
                </el-select>
                <div style="margin-left:55%">
                    <el-switch style="float: left" @change="switChange()" v-model="showPay" active-color="#13ce66" />
                    <span style="float: left; font-size: 12px">已缴费</span>
                    <el-switch style="float: left;margin-left:3%" @change="switChange()" v-model="showUnPay" active-color="#13ce66" />
                    <span style="float: left; font-size: 12px">未缴费</span>
                    <div style="width: 40%; height: 23px; float: left;
						margin-bottom: 3%; margin-left: 10%; border-style: solid;
						border-width: thin; border-radius: 10px; border-color: #d5d5d5;"
					>
						<input
							class="pay-search-input"
							style="width: 80%; height: 20px; float: left; border-style: none; border-radius: 10px"
							v-model="searchStu"
							placeholder="输入考生号搜索"
							@change="getPayByUN()"
						/>
						<img @click="getPayByUN()" style="height: 100%; width: 16%; float: left" src="../../assets/info/search.svg" alt="">
					</div>
                </div>
            </div>
            <div style="width: 100%;height: 90%;margin-top:3%">
                <el-table v-loading="loading"
					:data="paymentData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
					style="width: 100%"
					height="450"
					:row-style="{ height: '20px'}"
				>
                    <!-- 新闻文章标题 -->
                    <el-table-column prop="userName" label="考生号" align="center"></el-table-column>
                    <el-table-column prop="name" label="姓名" align="center"></el-table-column>
                    <el-table-column prop="sex" label="性别" width="50" align="center"></el-table-column>
                    <el-table-column prop="identity" label="身份证号" width="300" align="center"></el-table-column>
                    <el-table-column prop="green" label="绿色通道" align="center">
                      <template v-slot="scope">
                        <el-tag type="success" v-show="scope.row.paytype === '绿色'">是</el-tag>
                        <el-tag type="warning" v-show="scope.row.paytype === '普通'">否</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column prop="payed" label="是否缴费" align="center">
						<template v-slot="scope">
							<img style="width: 25px; height: 25px" src="../../assets/info/payed.svg" v-show="scope.row.payed === 1">
							<img style="width: 25px; height: 25px" src="../../assets/info/unpayed.svg" v-show="scope.row.payed === 0">
						</template>
                    </el-table-column>
                </el-table>
                <div class="block" style="margin-top:15px;">
                    <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-size="pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="paymentData.length">
                    </el-pagination>
                </div>
            </div>
        </el-card>
        <div style="width: 28%;height: 100%;float:left;margin-left: 1%">
            <el-card class="pie-card">
                <div v-loading="loading" style="width: 100%;height: 250px;" id="pay-hist"></div>
            </el-card>
            <el-card style="width: 100%;height:48%;margin-top:2%">
                <div v-loading="loading" style="width: 100%;height: 250px" id="green-hist"></div>
            </el-card>
        </div>
    </div>
</template>

<script>
import { ElMessage } from 'element-plus';

import request from '../../utils/request';

export default {
	data() {
		return {
			paymentData: [
			],
			pay: [],
			unpay: [],
			allStu: 0,
			payN: 0,
			unPayN: 0,
			green: 0,
			unGreen: 0,
			currentPage: 1, // 当前页码
			total: 0, // 总条数
			pageSize: 7, // 每页的数据条数
			college: '学校缴费信息',
			selectV: '',
			options: [
				{
					options: [
						{
							value: '学校缴费信息',
							label: '学校缴费信息',
						},
					],
				},
				{
					label: '学院缴费信息',
					options: [
						{value: ''},
						{value: ''},
						{value: ''},
						{value: ''},
						{value: ''},
						{value: ''},
						{value: ''},
						{value: ''},
						{value: ''},
						{value: ''},
						{value: ''},
						{value: ''},
						{value: ''},
						{value: ''},
						{value: ''},
						{value: ''},
					],
				},
			],
			showPay: true,
			showUnPay: true,
			searchStu: '', // 搜索该学生缴费信息
			loading: true
		}
	},
	mounted() {
	},
	created() {
		this.getPayData();
		this.getCollege();
		this.getGreen();
	},
	methods: {
		//每页条数改变时触发 选择一页显示多少行
		handleSizeChange(val) {
			this.currentPage = 1;
			this.pageSize = val;
		},
		//当前页改变时触发 跳转其他页
		handleCurrentChange(val) {
			this.currentPage = val;
		},
		// 查询某学生缴费情况
		getPayByUN() {
			if (this.searchStu.includes(' ')) {
				ElMessage.warning('')
			} else if (this.searchStu !== '') {
				request({
					method: 'post',
					url: '/api/pay/confirm',
					params: {userName: this.searchStu}
				}).then(res => {
					let code = res.code;
					if (code === 200) {
						this.paymentData[0].userName = res.data.username;
						this.paymentData[0].name = res.data.name;
						this.paymentData[0].sex = res.data.sex;
						this.paymentData[0].identity = res.data.identity;
						this.paymentData[0].green = res.data.green;
						this.paymentData[0].payed = res.data.confirm;
						this.total = 1;
						this.currentPage = 1;
						this.paymentData.splice(1, this.paymentData.length - 1)
					} else if (code === 404) {
						this.$router.push('/dist/error404');
					} else if (code === 400) {
						if (res.message === '学生不存在') {
							ElMessage.warning(res.message);
						} else {
							this.paymentData[0].userName = res.data.username;
							this.paymentData[0].name = res.data.name;
							this.paymentData[0].sex = res.data.sex;
							this.paymentData[0].identity = res.data.identity;
							this.paymentData[0].green = res.data.green;
							this.paymentData[0].payed = res.data.confirm;
							this.total = 1;
							this.currentPage = 1;
							this.paymentData.splice(1, this.paymentData.length - 1)
						}
					}
				})
			} else {
				this.getCollegePay();
			}
		},
		//获取学院信息
		getCollege() {
			request({
				method: 'get',
				url: '/api/college/get-all'
			}).then(res => {
				if (res.code === 1) {
					for (var i = 0; i < res.data.length; i++) {
						this.options[1].options[i].value = res.data[i].college;
					}
				}
			})
		},
		// 获取某个学院报名信息
		getCollegePay() {
			this.college = this.selectV;
			if (this.selectV !== '学校缴费信息') {
				request({
					method: 'get',
					url: '/api/pay/get-college-students',
					params: {college: this.selectV}
				}).then(res => {
					if (res.code === 200) {
						this.pay = res.data;
						this.payN = this.pay.length;
						for (var i = 0; i < this.pay.length; i++) { //给报到学生加标签
							this.pay[i].payed = 1;
						}
					}
					request({
						method: 'get',
						url: '/api/pay/get-college-n-students',
						params: {college: this.selectV}
					}).then(resp => {
						if (resp.code === 200) {
							this.unpay = resp.data;
							this.unPayN = this.unpay.length;
							for (var j = 0; j < this.unpay.length; j++) { // 未报到学生标签
								this.unpay[j].payed = 0;
							}
						}
						this.allStu = this.payN + this.unPayN;
						this.switChange();
						this.initPayHist();
					})
				})
			} else {
				this.getPayData();
			}
		},
		// 获取已缴费信息
		getPayData() {
			request({
				method: 'get',
				url: '/api/pay/get-students'
			}).then(res => {
				if (res.code === 200) {
					this.pay = res.data;
					this.payN = this.pay.length;
					for (var i = 0; i < this.pay.length; i++) { //给报到学生加标签
						this.pay[i].payed = 1;
					}
				}
				this.getUnPayData();
			})
		},
		// 获取未缴费信息
		getUnPayData() {
			request({
				method: 'get',
				url: '/api/pay/get-n-students'
			}).then(res => {
				if (res.code === 200) {
					this.unpay = res.data;
					this.unPayN = this.unpay.length;
					for (var i = 0; i < this.unpay.length; i++) { // 未报到学生标签
						this.unpay[i].payed = 0;
					}
				}
				this.loading = false;
				this.switChange();
				this.initPayHist()
			})
		},
		// 绿色通道人数
		getGreen() {
			request({
				method: 'get',
				url: '/api/user-less-pay/Data'
			}).then(res => {
				let code = res.code;
				if (code === 200) {
					this.green = res.data.is;
					this.unGreen = res.data.no;
				} else if (code === 404) {
					this.$router.push('/dist/error404')
				}
				this.initGreenHist();
			})
		},
		//开关改变
		switChange() {
			if (this.showPay === true && this.showUnPay === false) { // 仅获取已报到信息
				this.paymentData = this.pay;
				this.total = this.pay.length;
			} else if (this.showPay === false && this.showUnPay === true) { // 仅获取未报到信息
				this.paymentData = this.unpay;
				this.total = this.unpay.length;
			} else if (this.showPay === true && this.showUnPay === true) { // 所有信息
				this.paymentData = this.pay.concat(this.unpay);
				this.total = this.paymentData.length;
			} else if (this.showPay === false && this.showUnPay === false) {
				this.paymentData = [];
			}
		},
		initPayHist() {
			var histChart = this.$echarts.init(document.getElementById('pay-hist'));

			// 指定图表的配置项和数据
			var payHistOption = {
				color: ['#3398DB'],
				title: {
					text: '缴费比例',
					subtext: this.college,
					left: 'center'
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: { // 坐标轴指示器，坐标轴触发有效
						type: 'line' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						data: ['已缴费', '未缴费', '绿色通道'],
						axisTick: {
							alignWithLabel: true
						}
					}
				],
				yAxis: [
					{
						type: 'value'
					}
				],
				series: [
					{
						name: '人数',
						type: 'bar',
						barWidth: '60%',
						label: {
							show: true,
							position: 'top'
						},
						data: [this.payN, this.unPayN, 0]
					}
				]
			};


			// 使用刚指定的配置项和数据显示图表。
			histChart.setOption(payHistOption);
		},
		initGreenHist() {
			var histChart = this.$echarts.init(document.getElementById('green-hist'));

			// 指定图表的配置项和数据
			var greenHistOption = {
				color: ['#208b56'],
				title: {
					text: '绿色通道',
					subtext: this.college,
					left: 'center'
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: { // 坐标轴指示器，坐标轴触发有效
						type: 'line' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						data: ['已缴费', '未缴费'],
						axisTick: {
							alignWithLabel: true
						}
					}
				],
				yAxis: [
					{
						type: 'value'
					}
				],
				series: [
					{
						name: '人数',
						type: 'bar',
						barWidth: '60%',
						label: {
							show: true,
							position: 'top'
						},
						data: [this.green, this.unGreen]
					}
				]
			};


			// 使用刚指定的配置项和数据显示图表。
			histChart.setOption(greenHistOption);
		}
	},
}
</script>

<style lang="less" scoped>
.register-box {
    width: 100%;
    height: 100%;
}

.registerinfo-card {
    width: 70%;
    height: 100%;
    float: left;
}

.pay-search-input:placeholder-shown {
    outline: none;
}

.pay-search-input:focus {
	outline: none;
}

.pay-select-style {
    width: 30%;
    height: 100%;
    float: left;
    /deep/.el-input__inner {
        border-radius: 50px;
        border: 1px solid #a1a3ad;
        background-color: rgba(255, 255, 255, 0.8);
        font-family: PingFangSC-Regular;
        font-size: 15px;
        color: #000;
    }

    /deep/ .el-input.is-focus .el-input__inner {
        border-color: #000000;
        // height: 100%;
    }
}

/deep/.pay-select-popper {
    background-color: #fff;
    border-radius: 20px;
    font-family: PingFangSC-Regular;
    .el-select-group__title { // grounp标题样式
        font-weight: 700;
        font-size: 20px;
        background-color: rgb(255, 255, 255);
    }
    .el-select-dropdown__item.selected {
        border-radius: 10px;
        font-family: PingFangSC-Regular;
        font-size: 17px;
        color: rgb(95, 95, 95);
    }
    li {
        color: rgb(59, 59, 59);
        background: transparent;
        font-size: 15px;
    }
    .el-select-dropdown__item.hover {
        background-color: rgba(165, 165, 165, 0.2);
        margin-right: 1px;
    }
    .el-select-dropdown__item:hover {
        border-radius: 10px;
        background-color: rgba(172, 172, 172, 0.2);
        margin-right: 1px;
    }
    .popper__arrow::after {
      border-bottom-color: #a1a3ad;
    }
    .popper__arrow {
      border-bottom-color: #a1a3ad;
    }
    .el-select-dropdown__empty {
      padding: 0.2rem;
      font-size: 0.28rem;
    }
}

.pie-card {
    width: 100%;
    height: 50%;
}
</style>
